<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章列表</title>
    <style>
         *{
            padding:0;
            margin:0;
        }
        body{
            background:grey;
        }
        #page{
            background:white
        }
        @media screen and (min-width:600px){
        #bigBlock{
            width:50%;
            margin:0 auto;
        }
        }
        #page ul{
            list-style:none;
        }
    </style>
</head>
<body>
    <div id="bigBlock">
        <div id="menu">
        <ul>
            <li>
            <a href="lifeShare.html">生活分享</a> 
            </li>
            <li>
            <a href="pageShare.html">文章</a>
            </li>
            <li>
            <a href="#">网友留言</a>
            </li>
        </ul>
        </div>
        当前位置：<a href="index.html">主页</a>-><a href="pageShare.html">文章列表</a>
        <div id="page">
            <input type="button" value="<" name="left">
            <span>1/16</span>
            <input type="button" value=">" name="right">
            <span>转到第</span>
            <input type="text" >
            <span>页</span>  
        </div>
        <p style="color:white;" align="center">版权所有</p>
    </div>
</body>
<script>
     var inputLeft = document.querySelector("input[name='left']")
     var inputRight = document.querySelector("input[name='right']")
     var page = document.querySelector('#page')
    function ajax(method,url,pageNum,hs){
        var xmlhttp
        var res
        if(window.XMLHttpRequest){
            xmlhttp = new XMLHttpRequest()
        }else{
            xmlhttp = new ActiveXObject("Microsoft XMLHTTP")
        }
        xmlhttp.open(method,url)
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
        xmlhttp.send('num='+pageNum);
        xmlhttp.onreadystatechange=function(){
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
            res = JSON.parse(xmlhttp.responseText)
            hs(res)
            }
        }
    }
    var pageNum = 0
    var sumNum
    var span = document.querySelector("span")
function fillPageList(){
    ajax('post','pageShareInfo.php',pageNum,function(res){
        console.log(res.length)
        var ul = document.createElement("ul")
            for(i=0;i<res.length-1;i++){
            var li = document.createElement("li")
            var a = document.createElement("a")
            a.innerHTML = res[i].title
            a.href = "page.html?id="+res[i].id
            li.appendChild(a)
            ul.appendChild(li)
            }
            page.insertBefore(ul,inputLeft)
            sumNum = res[res.length-1]
            span.innerHTML = pageNum+1+"/"+parseInt(sumNum) 
    })
}
fillPageList()
inputLeft.onclick = function(){
    if(0<pageNum){
    pageNum = pageNum-1
    }else{
        pageNum=0
    }
    page.removeChild(page.children[0])
    fillPageList()
}
inputRight.onclick = function(){
    if(pageNum<parseInt(sumNum)-1){
    pageNum = pageNum+1
    }else{
        pageNum=parseInt(sumNum)-1
    }
    page.removeChild(page.children[0])
    fillPageList()
    console.log(parseInt(sumNum))
}
</script>
</html>